<template>
  <el-aside width="200px" style="background-color: #304156; color: #fff;">
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      background-color="#304156"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
    >
      <el-menu-item index="/">
        <el-icon><icon-menu /></el-icon>
        <span>Dashboard</span>
      </el-menu-item>
      <el-menu-item index="/user-management">
        <el-icon><icon-user /></el-icon>
        <span>用户管理</span>
      </el-menu-item>
      <el-menu-item index="/ingredient-management">
        <el-icon><icon-shopping-cart /></el-icon>
        <span>食材管理</span>
      </el-menu-item>
      <el-menu-item index="/recipe-management">
        <el-icon><icon-data-analysis /></el-icon>
        <span>食谱管理</span>
      </el-menu-item>
      <el-menu-item index="/order-management">
        <el-icon><icon-order /></el-icon>
        <span>订餐管理</span>
      </el-menu-item>
      <!-- <el-menu-item index="/nutrition-analysis"> 
        <el-icon><icon-nutrition /></el-icon>
        <span>营养分析</span>
      </el-menu-item>-->
    </el-menu>
  </el-aside>
</template>

<script setup>
import {
  Menu as IconMenu,
  User as IconUser,
  ShoppingCart as IconShoppingCart,
  DataAnalysis as IconDataAnalysis,
  List as IconOrder,
  Star as IconNutrition,
} from '@element-plus/icons-vue';
</script>